<template>
	<view class="chat-ai">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" size="24"></u-icon>
			</view>
			<text class="title">小知AI客服</text>
		</view>
		
		<scroll-view 
			scroll-y 
			class="message-list"
			:scroll-top="scrollTop"
			scroll-with-animation
		>
			<view class="messages">
				<view 
					v-for="(msg, index) in messages" 
					:key="index"
					:class="['message-item', msg.type]"
				>
					<view v-if="msg.type === 'ai'" class="avatar ai-avatar">
						<text class="avatar-emoji">🤖</text>
					</view>
					
					<view class="message-content">
						<text class="message-text">{{ msg.content }}</text>
						<text class="message-time">{{ formatTime(msg.time) }}</text>
					</view>
					
					<view v-if="msg.type === 'user'" class="avatar user-avatar">
						<image v-if="userAvatar && userAvatar !== '/static/images/default-avatar.png'" :src="userAvatar" class="avatar-image"></image>
						<text v-else class="avatar-emoji">👤</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="input-bar">
			<input 
				v-model="inputText"
				class="input"
				placeholder="输入您的问题..."
				confirm-type="send"
				@confirm="sendMessage"
			/>
			<view class="send-btn" @click="sendMessage">
				<u-icon name="arrow-up" size="24" color="#fff"></u-icon>
			</view>
		</view>
		
		<!-- 快捷问题 -->
		<view class="quick-questions" v-if="messages.length === 1">
			<text class="quick-title">常见问题</text>
			<view class="questions">
				<view 
					v-for="(q, index) in quickQuestions" 
					:key="index"
					class="question-item"
					@click="selectQuestion(q)"
				>
					<text>{{ q }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messages: [
				{
					type: 'ai',
					content: '您好！我是小知AI客服，有什么可以帮您的吗？😊',
					time: new Date()
				}
			],
			inputText: '',
			scrollTop: 0,
			userAvatar: '/static/images/default-avatar.png',
			quickQuestions: [
				'这个景点的开放时间是什么？',
				'门票价格是多少？',
				'有什么推荐的游玩路线吗？',
				'景点附近有停车场吗？',
				'有学生票优惠吗？'
			],
			sensitiveWords: [
				'政治', '暴力', '色情', '赌博', '违法', '毒品', '枪支', '爆炸'
			],
			scenicId: null
		};
	},
	
	onLoad(options) {
		if (options.scenicId) {
			this.scenicId = options.scenicId;
		}
		
		// 获取用户头像
		const userInfo = uni.getStorageSync('userInfo') || uni.getStorageSync('user');
		if (userInfo && userInfo.avatar) {
			this.userAvatar = userInfo.avatar;
		}
	},
	
	methods: {
		sendMessage() {
			if (!this.inputText.trim()) {
				return;
			}
			
			const message = this.inputText.trim();
			
			// 敏感词检测
			if (this.hasSensitiveWord(message)) {
				uni.showModal({
					title: '提示',
					content: '您的消息包含敏感词汇，请重新输入',
					showCancel: false
				});
				return;
			}
			
			// 添加用户消息
			this.messages.push({
				type: 'user',
				content: message,
				time: new Date()
			});
			
			this.inputText = '';
			this.scrollToBottom();
			
			// 模拟AI回复
			setTimeout(() => {
				this.getAIResponse(message);
			}, 500);
		},
		
		selectQuestion(question) {
			this.inputText = question;
			this.sendMessage();
		},
		
		async getAIResponse(message) {
			// 显示"正在输入..."
			const thinkingMsg = {
				type: 'ai',
				content: '正在思考中...',
				time: new Date()
			};
			this.messages.push(thinkingMsg);
			this.scrollToBottom();
			
			try {
				// 调用DeepSeek AI接口
				const res = await this.$api.deepseekChat({
					messages: this.messages.filter(m => m.type !== 'ai' || m.content !== '正在思考中...').map(m => ({
						role: m.type === 'user' ? 'user' : 'assistant',
						content: m.content
					})),
					question: message
				});
				
				// 移除"正在思考"消息
				const index = this.messages.indexOf(thinkingMsg);
				if (index > -1) {
					this.messages.splice(index, 1);
				}
				
				let response = '';
				if (res.data && res.data.code === 200 && res.data.data) {
					response = res.data.data.answer || res.data.data.content || '抱歉，我暂时无法回答您的问题。';
				} else {
					// 如果API调用失败，使用本地模拟回复
					response = this.generateAIResponse(message);
				}
				
				// 添加AI回复
				this.messages.push({
					type: 'ai',
					content: response,
					time: new Date()
				});
				
				this.scrollToBottom();
			} catch (error) {
				console.error('获取AI回复失败', error);
				
				// 移除"正在思考"消息
				const index = this.messages.indexOf(thinkingMsg);
				if (index > -1) {
					this.messages.splice(index, 1);
				}
				
				// 使用本地模拟回复作为降级方案
				this.messages.push({
					type: 'ai',
					content: this.generateAIResponse(message),
					time: new Date()
				});
				
				this.scrollToBottom();
			}
		},
		
		generateAIResponse(message) {
			// 简单的关键词匹配回复（实际应该调用真实AI接口）
			const msg = message.toLowerCase();
			
			if (msg.includes('开放时间') || msg.includes('营业时间')) {
				return '景点的开放时间为每天 08:00-17:30。建议您提前预订门票，以便更好地安排行程。';
			}
			
			if (msg.includes('门票') || msg.includes('价格') || msg.includes('多少钱')) {
				return '我们提供多种门票类型：\n\n成人票：¥150\n儿童票：¥75（适用于1.2米-1.4米儿童）\n学生票：¥90（需出示学生证）\n老人票：¥90（60岁以上）\n\n您也可以选择"立即预订"查看更多优惠信息。';
			}
			
			if (msg.includes('路线') || msg.includes('怎么玩') || msg.includes('推荐')) {
				return '为您推荐经典游玩路线：\n\n1. 入口广场（30分钟）\n2. 主峰景区（2小时）\n3. 历史文化展览馆（1小时）\n4. 观景台（40分钟）\n5. 美食街（午餐）\n\n全程约需要4-5小时，建议上午早点出发，避开高峰期。';
			}
			
			if (msg.includes('停车') || msg.includes('停车场')) {
				return '景点设有大型停车场，提供1000个停车位。\n\n停车费用：\n小型车：10元/次\n大型车：20元/次\n\n停车场距离景点入口步行约5分钟。';
			}
			
			if (msg.includes('学生票') || msg.includes('优惠')) {
				return '我们提供多种优惠政策：\n\n1. 学生票：凭有效学生证享受4折优惠\n2. 老年人：60岁以上享受4折优惠\n3. 儿童：1.2米以下免费\n4. 团体票：10人以上享受团体优惠\n\n您也可以在"我的"页面查看可用优惠券。';
			}
			
			if (msg.includes('天气') || msg.includes('穿什么')) {
				return '建议您出行前查看天气预报。景区海拔较高，建议您：\n\n1. 穿着舒适的运动鞋\n2. 携带防晒用品\n3. 准备一件薄外套\n4. 带上足够的饮用水\n\n祝您旅途愉快！';
			}
			
			if (msg.includes('预订') || msg.includes('订票')) {
				return '您可以通过以下方式预订门票：\n\n1. 点击景点详情页的"立即预订"按钮\n2. 选择门票类型和数量\n3. 选择可用优惠券\n4. 完成支付\n\n预订成功后，您将收到电子票，到景点后出示即可入园。';
			}
			
			if (msg.includes('退票') || msg.includes('退款')) {
				return '退票政策如下：\n\n1. 游玩日期前3天（含）：免费退票\n2. 游玩日期前1-2天：扣除10%手续费\n3. 游玩日期当天：不可退票\n\n如需退票，请在"我的订单"中申请。';
			}
			
			if (msg.includes('联系') || msg.includes('电话')) {
				return '您可以通过以下方式联系我们：\n\n客服电话：400-123-4567\n工作时间：08:00-20:00\n邮箱：service@travel.com\n\n或者继续在这里向我提问，我会尽力为您解答！';
			}
			
			// 默认回复
			return `感谢您的提问！关于"${message}"，我建议您：\n\n1. 查看景点详情页了解更多信息\n2. 浏览其他用户的评价和体验\n3. 如需更多帮助，可以拨打客服电话：400-123-4567\n\n还有其他问题吗？`;
		},
		
		hasSensitiveWord(text) {
			return this.sensitiveWords.some(word => text.includes(word));
		},
		
		formatTime(time) {
			const date = new Date(time);
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${hours}:${minutes}`;
		},
		
		scrollToBottom() {
			this.$nextTick(() => {
				this.scrollTop = 999999;
			});
		},
		
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-ai {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #F5F5F5;
	
	.header {
		height: 44px;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 16px;
		border-bottom: 1px solid #EEEEEE;
		
		.back-btn {
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: 500;
			color: #333;
			margin-left: -44px;
		}
	}
	
	.message-list {
		flex: 1;
		padding: 16px;
		
		.messages {
			.message-item {
				display: flex;
				margin-bottom: 20px;
				
				&.ai {
					justify-content: flex-start;
				}
				
				&.user {
					justify-content: flex-end;
					
					.message-content {
						background: #1AAD19;
						
						.message-text {
							color: #fff;
						}
					}
				}
				
				.avatar {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F0F0F0;
					border-radius: 50%;
					flex-shrink: 0;
					
					&.ai-avatar {
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					}
					
					&.user-avatar {
						background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
					}
					
					.avatar-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					
					.avatar-emoji {
						font-size: 24px;
						line-height: 1;
					}
				}
				
				.message-content {
					max-width: 70%;
					padding: 12px 16px;
					background: #fff;
					border-radius: 8px;
					margin: 0 10px;
					
					.message-text {
						font-size: 15px;
						line-height: 1.6;
						color: #333;
						word-break: break-word;
						white-space: pre-wrap;
					}
					
					.message-time {
						display: block;
						font-size: 12px;
						color: #999;
						margin-top: 6px;
						text-align: right;
					}
				}
			}
		}
	}
	
	.quick-questions {
		padding: 16px;
		background: #fff;
		border-top: 1px solid #EEEEEE;
		
		.quick-title {
			font-size: 14px;
			color: #666;
			margin-bottom: 12px;
			display: block;
		}
		
		.questions {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			
			.question-item {
				padding: 8px 12px;
				background: #F5F5F5;
				border-radius: 16px;
				font-size: 13px;
				color: #333;
			}
		}
	}
	
	.input-bar {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #fff;
		border-top: 1px solid #EEEEEE;
		
		.input {
			flex: 1;
			height: 40px;
			background: #F5F5F5;
			border-radius: 20px;
			padding: 0 16px;
			font-size: 15px;
		}
		
		.send-btn {
			width: 40px;
			height: 40px;
			margin-left: 12px;
			background: #1AAD19;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
